import { DatePicker, Input, Select, Row } from 'antd';
import { ComponentClass, FC } from 'react';
import { FormItemComponentProps } from 'react-antd-formutil';

export const components: Record<string, FC | ComponentClass> = {};

export interface PickerItemData {
    key?: string;
    type: 'form-item' | 'layout';
    componentName: keyof typeof components;
    componentProps?: Record<string, any>;
    formProps?: Omit<FormItemComponentProps, 'children'>;
    span?: number;
    children?: PickerItemData[];
}

export const pickerItems = new Map<any, PickerItemData>();

export interface PickerPlugin {
    component: FC | ComponentClass;
    options: PickerItemData;
}

export const picker = {
    components,
    pickerItems,
    use: (...plugins: PickerPlugin[]) => {
        plugins.forEach(p => {
            pickerItems.set(p.component, p.options);
            components[p.options.componentName] = p.component;
        });
    }
};

picker.use({
    component: Input,
    options: {
        type: 'form-item',
        componentName: 'Input',
        componentProps: {
            placeholder: '请输入'
        },
        formProps: {
            label: '输入框',
            name: undefined
        },
        span: undefined
    }
});

picker.use({
    component: Select,
    options: {
        type: 'form-item',
        componentName: 'Select',
        componentProps: {
            placeholder: '请选择',
            options: []
        },
        formProps: {
            label: '选一个',
            name: undefined
        },
        span: undefined
    }
});

picker.use({
    component: DatePicker,
    options: {
        type: 'form-item',
        componentName: 'DatePicker',
        componentProps: {
            placeholder: '请选择'
        },
        formProps: {
            label: '日期',
            name: undefined
        },
        span: undefined
    }
});

picker.use({
    component: Row,
    options: {
        type: 'layout',
        componentName: 'Row',
        formProps: {
            label: 'Flex'
        },
        componentProps: {
            gutter: 24
        },
        span: undefined
    }
});
